<template>
  <div class="personal-center">
    <!-- 第一个模块: 显示圆形头像和用户昵称 -->
    <div class="profile">
      <van-image round fit="cover" :src="avatarUrl" />
      <div class="username">{{ userName }}</div>
      <div class="info">
        <div>收藏 {{ favoritesCount }}</div>
        <div>关注 {{ followsCount }}</div>
        <div>积分 {{ points }}</div>
        <div>优惠券 {{ coupons }}</div>
      </div>
    </div>

    <!-- 第二个模块: 订单信息 -->
    <div class="order-info">
      <van-cell-group>
        <van-cell>
          <template #title>
            <span>待付款</span>
            <van-badge :content="pendingPayment" />
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span>待发货</span>
            <van-badge :content="pendingDelivery" />
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span>待收货</span>
            <van-badge :content="pendingReceipt" />
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span>已完成</span>
            <van-badge :content="completedOrders" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 第三个模块: 退出登录按钮 -->
    <div class="logout-button">
      <van-button block type="danger" @click="handleLogout">退出登录</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Image as VanImage, Button as VanButton, Cell as VanCell, CellGroup as VanCellGroup, Badge as VanBadge } from 'vant';
import { rq } from '../utils/request';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();

// 示例数据
const avatarUrl = ref('https://example.com/avatar.jpg');
const userName = ref('用户名');
const favoritesCount = ref(5);
const followsCount = ref(10);
const points = ref(200);
const coupons = ref(3);
const pendingPayment = ref(2);
const pendingDelivery = ref(1);
const pendingReceipt = ref(4);
const completedOrders = ref(15);

// 退出登录处理
const handleLogout = async () => {
  // 实现退出登录逻辑
  // 调用rq方法,用get类型请求 /logout,执行成功后,用showToast提示登出成功,并且跳转回登陆页
  // 跳转回登陆页
  await rq('/logout','get').then(()=>{
    showToast('登出成功');
    router.push('/login');
  })

  

  
  


};

// 在组件挂载时发起请求
onMounted(() => {
  fetchUserData();
});

// 发起 GET 请求
const fetchUserData = async () => {
  try {
    const response = await rq('/inthepink/myUser','get');
    console.log('响应结果:', response.data);
    // 将response.data.data.account设置为用户名
    userName.value = response.data.data.account;
    // 将response.data.data.avatar设置为头像
    avatarUrl.value = response.data.data.avatar;
    // 设置 score，likeNumber，couponNumber，collectionNumber
    points.value = response.data.data.score;
    favoritesCount.value = response.data.data.likeNumber;
    coupons.value = response.data.data.couponNumber;
    followsCount.value  = response.data.data.couponNumber;

    // 设置finishedNumber，paidNumber，receivedNumber，shippedNumber的值到徽标组件
    pendingPayment.value = response.data.data.orderInfo.finishedNumber;
    pendingDelivery.value = response.data.data.orderInfo.paidNumber;
    pendingReceipt.value = response.data.data.orderInfo.receivedNumber;
    completedOrders.value = response.data.data.orderInfo.shippedNumber;


    
    // 可以在这里处理响应数据，例如更新组件状态
  } catch (error) {
    console.error('请求失败:', error);
  }
};
</script>

<style scoped>
.personal-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile {
  text-align: center;
  margin-bottom: 20px;
}

.info {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.order-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.order-info .van-cell-group {
  display: flex;
  flex-wrap: nowrap;
}

.order-info .van-cell {
  flex: 1;
  margin-right: 10px;
}

.order-info .van-cell:last-child {
  margin-right: 0;
}

.logout-button {
  width: 90%;
}
</style>